<template>
  <div class="parent">
    <h1>父组件</h1>
    <p>{{command}}</p>
    <!-- 使用子组件 message是子组件的属性 用于父组件向子组件传递信息 -->
    <child message="Hello World!!!" @command-from-child="handleChildCommand"></child>
  </div>
</template>

<script>
// 导入子组件
import child from "./child";
export default {
  name: "ParentEx",
  // 注册子组件
  components: {
    child
  },
  data() {
    return {
      // 接收子组件的消息
      command: "..."
    }
  },
  methods: {
    // 子组件向父组件传递消息
    handleChildCommand(command) {
      console.log(command);
      this.command = command;
    }
  }
}
</script>

<style scoped>
  .parent {
    border: 1px solid #ccc;
    padding: 10px;
  }
  .parent h1 {
    color: rebeccapurple;
  }
</style>